<template>
   <div class="Back" id="contentBox" @click.stop="exit">
       <div class="content" :style="getAnimationData">
           <div class="contentBack">
                  <img :src="require('@/assets/default/background/'+BackImage.src)"  v-if="BackImage.type==1">
                  <img  :src="BackImage.src"  v-else/>
           </div>
           <div class="fun">
               <button v-for="(fun,index) in funData" :key="index" class="funOne flex" @click="beforeSubmit(fun)"> 
                  <img :src="require('@/assets/navi/'+fun.icon)" class="icon">
                  <div class="label">{{fun.label}}</div>
               </button>
           </div>
           
       </div>
   </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'

  export default 
  {
     name :'', 
     props:{
        "leftNaviInfo":{
            default:{state:false}
        }
     },
     mounted() {
        document.body.style.overflow = 'hidden'
     },
     beforeDestroy(){
        document.body.style.overflow = 'auto'
     },
     computed:{
        ...mapState('Setting',['BackImage','Subject']),
          ...mapState('Login',['User']),
          getAnimationData(){
            return  this.animationData
          }
     },
     data() {
        return {
            funData:[
                {label:'发布',icon:'Home.png',click:this.openPublic},
                {label:'搜索',icon:'Home.png',click:this.SEARCHON}
            ],
            animationData:{
                animation:'leftToRight 0.3s'
            }
        }
     },

     methods:{
        ...mapMutations('Article',['SETPUBLISHSTATE']),
        ...mapMutations('Search',['SEARCHON']),
        //退出
        exit(){
            this.animationData = 'leftToRight 0.3s reverse'
              this.leftNaviInfo.state = false
        //     let timer = setTimeout(() => {
        //      this.leftNaviInfo.state = false
        //      clearTimeout(timer)
        //    }, 300);
        },
          //打开编辑组件
         openPublic(){
               if(this.User == null) return this.$public.toLogin()
               let data={index:1,title:'发布博客'}
               this.SETPUBLISHSTATE(data)
         },

        beforeSubmit(fun){
            if(fun.click == null) return this.$message.warning('功能暂未实现')

            fun.click(fun.args)
        }
     }
  }
</script>
<style scoped lang='less'>
#contentBox{
    justify-content: flex-start;
}
.content{
    width: 60vw;
    height: 100vh;
    // background: rgba(0, 0, 0, 0.2);
    overflow: auto;
}
.contentBack{
    width: 60vw;
    height: 100%;
    position: absolute;
    left: 0;right: 0;
    z-index: -1;

        img{
            width: 100%;
            height: 100%;
            border-radius: 0;
        }
}
.fun{
    padding: 50px 20px;
    box-sizing: border-box;
    width: 100%;
    
}
.funOne{
    width: 100%;
    justify-content: flex-start;
    height: 50px;
    
    .label{
        color: white;
        font-size: 20px;
        font-weight: 600;
    }
    .icon{
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
}
</style>